window.onload = function () {
    // dom获取
    let header = document.querySelector('header')
    let usernameSpan = document.querySelector('header .username span')
    let footer = document.querySelector('footer')
    let addUser = document.querySelector('.userlist .add')


    // 业务处理
    if(!getCookie('username')){
        popup.msg('没有登陆',()=>{
            location.href = '/login.html'
        })
    }
    // 显示当前用户
    /* function showUser() {
        let username = getCookie('username')
        if (username) {
            usernameSpan.innerText = username
            let exitBtn = document.createElement('button')
            exitBtn.innerText = '退出'

            header.querySelector('.username').appendChild(exitBtn)
        }
    }
    showUser() */

    // 添加用户
    addUser.onclick = () => {
        let mask = document.createElement('div')
        mask.className = 'mask'
        document.querySelector('body').appendChild(mask)
        mask.style.display = 'block'
        text = `
            <div class="formtitle">添加用户</div>
            <div class="userform">
                <form action="javascript:;" method="post">
                    <input type="text" name="username" placeholder="用户名" class="int"><br>
                    <input type="text" name="password" placeholder="密码" class="int"><br>
                    <input type="text" name="email" placeholder="邮箱" class="int"><br>
                    男：<input type="radio" name="sex" value="男">
                    女：<input type="radio" name="sex" value="女">
                    保密：<input type="radio" name="sex" value="保密">
                    <input type="text" name="tel" placeholder="手机号" class="int">
                </form>
            </div>
        `
        popup.confirm(text, () => {
            // 取消
            mask.style.display = 'none'
        }, () => {
            // 确定
            mask.style.display = 'none'
            let form = document.querySelector('.userform form')
            let username = form.querySelector('[name="username"]')
            let password = form.querySelector('[name="password"]')
            let email = form.querySelector('[name="email"]')
            let sex = form.querySelectorAll('[name="sex"]')
            let tel = form.querySelector('[name="tel"]')
            sex.forEach(items => {
                if (items.checked) {
                    sex = items
                    return
                }
            })
            promiseRequest({
                method: 'post',
                url: '/front/api/user/add',
                data: {
                    username: username.value,
                    password: password.value,
                    email: email.value,
                    sex: sex.value,
                    tel: tel.value
                }
            }).then(res => {
                if (res.error_code === 200) {
                    popup.msg(res.msg, () => {
                        // 渲染页面
                        displayUser()
                    })
                } else {
                    popup.msg(res.msg)
                }
            })
        })
    }

    // 渲染页面
    function displayUser() {
        promiseRequest({
            method: 'get',
            url: '/front/api/user/getuser',
        }).then(res => {
            if (res.error_code === 200) {
                let ul = document.querySelector('main>div>.content>ul')
                let newUL = ul.cloneNode(ul)
                let li = document.querySelector('main>div>.content>ul>li')
                li.innerHTML = ''
                newUL.innerHTML = ''
                var No = 1;
                res.data.userInfo.forEach(items => {

                    let newLi = li.cloneNode(li)
                    newLi.innerHTML += `
                        <ol>
                            <li>${No++}</li>
                            <li>${items.username}</li>
                            <li>${items.tel}</li>
                            <li>${items.email}</li>
                            <li>${items.sex}</li>
                            <li>禁用</li>
                            <li>
                                <span data-username="${items.username}" data-tel="${items.tel}" data-email="${items.email}" data-sex="${items.sex}" ">编辑</span>
                                <span data-username="${items.username}">删除</span>
                            </li>
                        </ol>
                    `
                    newUL.appendChild(newLi)
                })
                document.querySelector('main>div>.content').removeChild(ul)
                document.querySelector('main>div>.content').appendChild(newUL)

            } else {
                popup(res.msg)
            }
        })
    }
    displayUser()

    document.querySelector('main>div>.content').onclick = e => {
        let target = e.target;
        if ((target.innerText) === '编辑') {
            let username1 = target.dataset.username
            let email1 = target.dataset.email
            let tel1 = target.dataset.tel
            let sex1 = target.dataset.sex

            let mask = document.createElement('div')
            mask.className = 'mask'
            document.querySelector('body').appendChild(mask)
            mask.style.display = 'block'
            text = `
                <div class="formtitle">添加用户</div>
                <div class="userform">
                    <form action="javascript:;" method="post">
                        <input type="text" name="username" placeholder="用户名" class="int" value="${username1}"><br>
                        <input type="text" name="password" placeholder="密码" class="int" value=""><br>
                        <input type="text" name="email" placeholder="邮箱" class="int" value="${email1}"><br>
                        男：<input type="radio" name="sex" value="男" checked>
                        女：<input type="radio" name="sex" value="女">
                        保密：<input type="radio" name="sex" value="保密">
                        <input type="text" name="tel" placeholder="手机号" class="int" value="${tel1}">
                    </form>
                </div>
            `
            popup.confirm(text, () => {
                // 取消
                mask.style.display = 'none'
            }, () => {
                // 确定
                let form = document.querySelector('.userform form')
                let username = form.querySelector('[name="username"]')
                let password = form.querySelector('[name="password"]')
                let email = form.querySelector('[name="email"]')
                let sex = form.querySelectorAll('[name="sex"]')
                let tel = form.querySelector('[name="tel"]')
                sex.forEach(items => {
                    if (items.checked) {
                        sex = items
                        return
                    }
                })
                promiseRequest({
                    method: 'post',
                    url: '/front/api/user/update',
                    data: {
                        beforeusername: username1,
                        username: username.value,
                        password: password.value,
                        email: email.value,
                        sex: sex.value,
                        tel: tel.value
                    }
                }).then(res => {
                    if (res.error_code === 200) {
                        popup.msg(res.msg, () => {
                            // 渲染页面
                            mask.style.display = 'none'
                            displayUser()
                        })
                    } else {
                        popup.msg(res.msg)
                        setTimeout(() => {
                            mask.style.display = 'none'
                        }, 1000)
                    }
                })
            })
        }
        if ((target.innerText) === '删除') {
            promiseRequest({
                method: 'post',
                url: '/front/api/user/del',
                data: {
                    username: target.dataset.username
                }
            }).then(res => {
                if (res.error_code === 200) {
                    popup.msg(res.msg, () => {
                        // 渲染页面
                        displayUser()
                    })
                } else {
                    popup.msg(res.msg)
                }
            })
        }
    }
}